<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/codemirror.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/addon/lint/lint.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.43.0/theme/neo.css"
    />
    <link rel="stylesheet" type="text/css" href="./css/example.css" />
    <link rel="stylesheet" href="../dist/toastui-chart.css" />
    <title>17.5 [Common] Common Component Theme</title>
  </head>
  <body>
    <div class="description">
      You can see the tutorial
      <a href="https://github.com/nhn/tui.chart/blob/main/docs/en/common-theme.md" target="_blank">here</a>
      <br />
      <strong
        >The example code can be slower than your environment because the code is transpiled by
        babel-standalone in runtime.</strong
      >
    </div>
    <div class="wrap">
      <div class="code-html" id="code-html">
        <div id="chart-area"></div>
      </div>
      <div class="custom-area">
        <div id="error-dim">
          <span id="error-text"></span>
          <div id="error-stack"></div>
          <span id="go-to-dev-tool"
            >For more detail, open browser's developer tool and check it out.</span
          >
        </div>
        <div class="try-it-area">
          <h3>try it</h3>
          <textarea id="code"></textarea>
          <div class="apply-btn-area">
            <button class="btn" onclick="evaluationCode(chartCM, codeString);">Run it!</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script src="../dist/toastui-chart.js"></script>
    <script class="code-js" id="code-js" type="text/babel">
      const el = document.getElementById('chart-area');
      const data = {
        categories: [
          '01/01/2020',
          '02/01/2020',
          '03/01/2020',
          '04/01/2020',
          '05/01/2020',
          '06/01/2020',
          '07/01/2020',
          '08/01/2020',
          '09/01/2020',
          '10/01/2020',
          '11/01/2020',
          '12/01/2020',
        ],
        series: [
          {
            name: 'Seoul',
            data: [-3.5, -1.1, 4.0, 11.3, 17.5, 21.5, 25.9, 27.2, 24.4, 13.9, 6.6, -0.6],
          },
          {
            name: 'Seattle',
            data: [3.8, 5.6, 7.0, 9.1, 12.4, 15.3, 17.5, 17.8, 15.0, 10.6, 6.6, 3.7],
          },
          {
            name: 'Sydney',
            data: [22.1, 22.0, 20.9, 18.3, 15.2, 12.8, 11.8, 13.0, 15.2, 17.6, 19.4, 21.2],
          },
          {
            name: 'Moscow',
            data: [-10.3, -9.1, -4.1, 4.4, 12.2, 16.3, 18.5, 16.7, 10.9, 4.2, -2.0, -7.5],
          },
          {
            name: 'Jungfrau',
            data: [-13.2, -13.7, -13.1, -10.3, -6.1, -3.2, 0.0, -0.1, -1.8, -4.5, -9.0, -10.9],
          },
        ],
      };

      const theme = {
        title: {
          fontFamily: 'Comic Sans MS',
          fontSize: 45,
          fontWeight: 100,
          color: '#ff416d',
        },
        xAxis: {
          title: {
            fontFamily: 'Impact',
            fontSize: 15,
            fontWeight: 400,
            color: '#ff416d',
          },
          label: {
            fontFamily: 'fantasy',
            fontSize: 11,
            fontWeight: 700,
            color: '#6EB5FF',
          },
          width: 2,
          color: '#6655EE',
        },
        yAxis: [
          {
            title: {
              fontFamily: 'Impact',
              fontSize: 17,
              fontWeight: 400,
              color: '#03C03C',
            },
            label: {
              fontFamily: 'cursive',
              fontSize: 11,
              fontWeight: 700,
              color: '#6655EE',
            },
            width: 3,
            color: '#88ddEE',
          },
          {
            title: {
              fontFamily: 'Comic Sans MS',
              fontSize: 13,
              fontWeight: 600,
              color: '#00a9ff',
            },
            label: {
              fontFamily: 'cursive',
              fontSize: 11,
              fontWeight: 700,
              color: '#FFABAB',
            },
            width: 3,
            color: '#AFFCCA',
          },
        ],
        legend: {
          label: {
            fontFamily: 'cursive',
            fontSize: 15,
            fontWeight: 700,
            color: '#ff416d',
          },
        },
        tooltip: {
          background: '#80CEE1',
          borderColor: '#3065AC',
          borderWidth: 10,
          borderRadius: 20,
          borderStyle: 'double',
          header: {
            fontSize: 15,
            fontWeight: 700,
            color: '#333333',
            fontFamily: 'monospace',
          },
          body: {
            fontSize: 11,
            fontWeight: 700,
            color: '#a66033',
            fontFamily: 'monospace',
          },
        },
        exportMenu: {
          button: {
            backgroundColor: '#ff0000',
            borderRadius: 5,
            borderWidth: 2,
            borderColor: '#000000',
            xIcon: {
              color: '#ffffff',
              lineWidth: 3,
            },
            dotIcon: {
              color: '#ffffff',
              width: 10,
              height: 3,
              gap: 1,
            },
          },
          panel: {
            borderColor: '#ff0000',
            borderWidth: 2,
            borderRadius: 10,
            header: {
              fontSize: 15,
              fontFamily: 'fantasy',
              color: '#ffeb3b',
              fontWeight: 700,
              backgroundColor: '#673ab7',
            },
            body: {
              fontSize: 12,
              fontFamily: 'fantasy',
              color: '#ff0000',
              fontWeight: '500',
              backgroundColor: '#000000',
            },
          },
        },
        plot: {
          vertical: {
            lineColor: 'rgba(60, 80, 180, 0.3)',
            lineWidth: 5,
            dashSegments: [5, 20],
          },
          horizontal: {
            lineColor: 'rgba(0, 0, 0, 0)',
          },
          backgroundColor: 'rgba(60, 80, 180, 0.1)',
        },
      };

      const options = {
        chart: { title: '24-hr Average Temperature', width: 800, height: 500 },
        xAxis: {
          title: 'Month',
        },
        yAxis: [
          {
            title: 'Temperature (Celsius)',
          },
          {
            title: 'Percent (%)',
            scale: {
              min: 0,
              max: 100,
            },
          },
        ],
        legend: {
          align: 'bottom',
        },
        theme,
      };

      const chart = toastui.Chart.lineChart({ el, data, options });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.0/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.0/addon/edit/matchbrackets.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.0/addon/selection/active-line.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.0/mode/javascript/javascript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.0/addon/lint/lint.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.0/addon/lint/javascript-lint.js"></script>
    <script src="./js/example.js" type="text/babel"></script>
  </body>
</html>
